<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Friendship-Graph Theory</title>

	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/echarts/3.7.2/echarts.js"></script>
	<script src="https://cdn.bootcss.com/echarts/3.7.2/extension/dataTool.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;"></div>
    <div class="container">
    	<center>
    		<a href="./" class="btn btn-success">Circular</a>
    		<a href="./none.html" class="btn btn-primary">None</a>
    	</center>
    </div>
    <script type="text/javascript">
    	$("#main").height($(window).height()*0.9);
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
		myChart.showLoading();
		$.get('friendship.gexf', function (xml) {
		    myChart.hideLoading();

		    var graph = echarts.dataTool.gexf.parse(xml);
		    var categories = [
				{name: '电子科学与技术'},
				{name: '电子商务'},
				{name: '电子与通信工程'},
				{name: '交通信息工程及控制专业'},
				{name: '控制工程'},
				{name: '通信与信息系统'},
				{name: '信息安全'}
		    ];
		    graph.nodes.forEach(function (node) {
		        node.itemStyle = null;
		        node.symbolSize = 10;
		        node.value = node.symbolSize;
		        node.category = node.attributes.category-1;
		        // Use random x, y
		        node.x = node.y = null;
		        node.draggable = true;
		    });
		    option = {
		        title: {
		            // text: 'Les Miserables',
		            // subtext: 'Default layout',
		            top: 'bottom',
		            left: 'right'
		        },
		        tooltip: {},
		        legend: [{
		            // selectedMode: 'single',
		            data: categories.map(function (a) {
		                return a.name;
		            })
		        }],
		        animation: false,
		        series : [
		            {
		                // name: 'Les Miserables',
		                type: 'graph',
		                layout: 'force',
		                data: graph.nodes,
		                links: graph.links,
		                categories: categories,
		                roam: true,
		                label: {
		                    normal: {
		                        position: 'right'
		                    }
		                },
		                force: {
		                    repulsion: 80
		                }
		            }
		        ]
		    };

		    myChart.setOption(option);
		}, 'xml');
    </script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>